<script>
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import { isSimpleApp } from "@/utils"

export default {
  name: "index",
  data() {
    return {
      selected: 0,
      color: "#393C45",
      selectedColor: "#2CB980",
      deviceHasSafeArea: false,
      list: [
        {
          pagePath: "/pages/index/index",
          iconPath: "/static/tabbar/home_inactive.png",
          selectedIconPath: "/static/tabbar/home_active.png",
          text: "首页",
        },
        {
          pagePath: "/pages/mine/mine",
          iconPath: "/static/tabbar/mine_inactive.png",
          selectedIconPath: "/static/tabbar/mine_active.png",
          text: "我的",
        },
      ],
    }
  },
  async created() {
    // 获取设备信息，判断是否有安全区域
    wx.getSystemInfo({
      success: (res) => {
        if (res.safeArea.bottom < res.screenHeight) {
          this.deviceHasSafeArea = true
        } else {
          this.deviceHasSafeArea = false
        }
      },
    })
  },
  async mounted() {
    // 判断是否是校务行进来的，如果是则屏蔽课程和督学
    const res = await isSimpleApp()
    if (!res) {
      this.list.splice(
        1,
        0,
        {
          pagePath: "/pages/course/list",
          iconPath: "/static/tabbar/course_inactive.png",
          selectedIconPath: "/static/tabbar/course_active.png",
          text: "课程",
        },
        {
          pagePath: "/pages/Supervisor/Supervisor",
          iconPath: "/static/tabbar/book_inactive.png",
          selectedIconPath: "/static/tabbar/book_active.png",
          text: "督学",
        },
      )
    }
    // 回显当前页面选中的tab
    const page = getCurrentPages().pop()
    // 判断数据是否一致，一致则不更新数据
    this.selected = this.list.findIndex((item) => item.pagePath === `/${page.route}`)
  },
  methods: {
    valIsEmpty(val) {
      return val == null || val === "" || val === undefined || val === "<p><br></p>"
    },
    switchTab(path, index) {
      uni.redirectTo({
        url: path,
      })
      this.selected = index
    },
  },
}
</script>

<template>
  <view class="tab-bar" :class="{ 'tab-bar-safe': deviceHasSafeArea }">
    <view class="tab-bar-border"></view>
    <view v-for="(item, index) in list" :key="index" class="tab-bar-item" @click="() => switchTab(item.pagePath, index)">
      <image :src="selected === index ? item.selectedIconPath : item.iconPath" mode="heightFix"></image>
      <view :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  padding-top: 14rpx;
  padding-bottom: 14rpx;
  z-index: 9999;
}

.tab-bar-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  height: 56rpx;
  max-width: 70rpx;
}

.tab-bar-item view {
  font-size: 24rpx;
  margin-top: 6rpx;
}
</style>
